<template>
	<transition name='fade' v-if="!loading">
		<div class='rindex'>
			<div class='top'>
				<span class='order'></span>
				<p>章节列表</p>
				<span class='order' @click="sort">倒序</span>
			</div>

			<div class='list'>
				<ul class='clearfix list-wrap'>
					<li class='list-item' v-for="(item, index) in chapter" :key="item.id" @click="toReading(item)">
						<span>{{ item.post_title }}</span>
						<i class='icon' :class="{'moneny': item.post_root == '1', 'free': item.post_root == '0' || !item.post_root}">
							{{ post_root[item.post_root * 1] }}
						</i>
					</li>
				</ul>
			</div>
		</div>
	</transition>
</template>

<script>
	import {mapState} from 'vuex'

	export default{
		data() {
			return {
				loading		: true,
				params		: {
					p 		: 1, 
					limit	: 8,
					hidden	: false
				},
				chapter  	: [],
				post_root   : ['免费', 'vip'],
				is_desc 	: true
			}
		},
		created() {
			setTimeout(() => {
				this.loading 	= false
			}, 1000)

			this.init()
		},
		computed: {
			...mapState({
				bookItem: state => state.bookItem
			})
		},
		activated() {
			this.init()
		},
		methods: {
			getChapter(id) {
				this.params.id = id
				console.log(id)
				this.HttpService.getChapter(this.params).then(data => {
					this.chapter = data.data
				})
			},
			toReading(item) {
				this.$store.commit('setBookDetail', item)
				this.$router.push('/reading/detail?id=' + item.object_id)
			},
			getConfig() {
		      this.HttpService.getGlobalConfig().then(data => {
		        if (data) {
		          this.config = data.config
		          // this.$store.commit('setTicketCount', data.config.num)
		        }
		      })
		    },
		    init() {
		    	setTimeout(() => {
					if(!this.bookItem.id) {
						this.getChapter(this.$route.query.id)
					} else {
						this.getChapter(this.bookItem.id)
					}
				}, 20)
		    },
		    getUserInfo() {
		      if (this.util.getStorageSync('session'))
		        this.HttpService.signIn()
		    },
		    sort() {
		    	let d 		= this.chapter
		    	let nArr 	= []
		    	let len 	= d.length - 1
		    	for(let i = len; i >= 0; i--) {
		    		nArr.push(d[i])
		    	}

		    	this.chapter = nArr
		    }
		}
	}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
	@import "~@/common/stylus/variable.styl"
	@import "~@/common/stylus/mixin.styl"
	
	::-webkit-scrollbar
		width: 0
	em, i
		font-style: normal
	
	.top
		display: flex
		padding: 10px
		font-size: 16px
		text-align: center
		border-bottom: 1px solid $vc
		.order
			width: 40px
		p
			flex: 1	

	.list-item
		position: relative
		padding-left: 10px
		hh(44px)
		font-size: 14px
		border-bottom: 1px solid $vc
		span
			display: block
			margin-right: 80px
			white-space: nowrap
			text-overflow: ellipsis
			overflow: hidden
		.icon
			position: absolute
			right: 10px
			top: 10px
			width: 40px
			height: 20px
			line-height: 20px
			text-align: center
			font-size: 12px
			border-radius: 3px
			color: #fff
			transform: scale(0.9)
		.free
			background-color: $vc	
		.moneny
			background-color: red		
	
	.loading
		position: fixed
		top: 50px
		bottom: 55px
		left: 0
		right: 0
		z-index: 999
		width: auto
		height: auto
	
	.move-enter-active, .move-leave-active
		transiti(all, 0.4s, ease)
	.move-enter
		transform: translate3d(100%, 0, 0)
	.move-leave
		transform: translate3d(0, 0, 0)
		
	.bottom-enter-active, .bottom-leave-active
		transition:all 0.4s cubic-bezier(1.0, 0.5, 0.8, 1.0)
	.bottom-enter
		transform: translate3d(0, 55px, 0)
	.bottom-leave
		transform: translate3d(0, 0px, 0)
</style>